<template>
    <el-form :model="nodeForm" 
    status-icon :rules="rules"
     ref="nodeFormRef" 
     label-width="90px">
        <el-form-item label="上级节点" prop="pid">
            <el-select v-model="nodeForm.pid" placeholder="请选择上级节点">
                <!-- pids数据从Ajax中获取 -->
                <el-option v-for="item in pids" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="名称" prop="name">
            <el-input v-model="nodeForm.name" autocomplete="off" placeholder="权限节点名称，【新增用户】" />
        </el-form-item>

        <el-form-item label="标识" prop="ename">
            <el-input v-model="nodeForm.ename" autocomplete="off" placeholder="权限节点程序标识，【user_add】" />
            <!-- <span class="el-upload__tip">权限节点程序标识，【user_add】</span> -->
        </el-form-item>

        <el-form-item label="是否菜单" prop="meun">
            <el-radio-group v-model="nodeForm.meun">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="路由" prop="route">
            <el-input v-model="nodeForm.route" autocomplete="off" placeholder="路由地址：/sys/user" />
        </el-form-item>

        <el-form-item label="图标" prop="icon">
            <el-autocomplete v-model="nodeForm.icon" :fetch-suggestions="querySearch"
                placeholder="图标名称：el-icon-video-camera">
                <template slot-scope="{ item }">
                    <i :class="[item.value]"></i>
                    <span>【{{ item.value }}】</span>
                </template>
            </el-autocomplete>
        </el-form-item>
        <!-- 多行文本域 :row表示行数， -->
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="3" resize="none" v-model="nodeForm.remark" autocomplete="off"
                placeholder="请输入备注信息" />
        </el-form-item>

        <el-form-item>
            <el-button :loading="addLoading" 
            type="primary" 
            @click="submitForm('nodeFormRef')">新增权限节点</el-button>
            <el-button @click="resetForm('nodeFormRef')">重置</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import { addNodeApi,getPidToNodesApi } from '@/api/nodeApi'
import nodeMixin from '../mixin'
export default {
    mixins: [nodeMixin],
    data() {
        return {
            addLoading: false,     //加载中过渡动画效果(开关)
            pids: [{ id: 0, name: '顶层节点' }],
            nodeForm: {
                name: '',
                ename: '',
                icon: '',
                meun: '1',
                route: '',
                remark: '',
                pid: ''
            },
            //icon图标数据
            icons: [
                { value: 'el-icon-s-promotion' },
                { value: 'el-icon-s-home' },
                { value: 'el-icon-s-custom' },
                { value: 'el-icon-share' }
            ],
        }
    },
    //获取上级节点数据
    mounted() {
    this.loadPids()
  },
    methods: {
    //获取上级节点数据
        async loadPids() {
      let ret = await getPidToNodesApi()
      // this.pids = [...this.pids, ...ret.data]
      this.pids.push(...ret.data)
    },
        //组件中方法，实现点击输入框弹出选项列表，
        querySearch(queryString, cb) {
            cb(this.icons)
        },
        //提交表单
        submitForm(formName) {
            //加载中动画效果
            this.addLoading = true
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    let ret = await addNodeApi(this.nodeForm)
                    if (ret.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '新增权限节点成功',
                            showClose: true,
                            duration: 3000,
                            onClose: () => {
                                this.resetForm(formName)    //
                                this.addLoading = false     //防抖，防止一直点击进行提交
                                this.$emit('update:dialogVisible', false)
                            }
                        })
                    } else {
                        console.log('失败')
                        this.addLoading = false    //防抖，防止一直点击进行提交
                    }
                }
            })
        },
        //重置表单内容
        resetForm(formName) {
            this.$refs[formName].resetFields()
        }
    }
}
</script>


<style scoped></style>